<template>
  <div id="home-info">
    <van-row v-for="(item,index) in goodsList" :key="index" justify='center'>
      <!-- 上半部分的标题内容 -->
      <van-row>
        <img :src="item.floor_title.image_src" alt="">
      </van-row>
      <!-- 下半部分的主体展示 -->
      <van-row>
        <!-- 主体的左侧大图片 -->
        <van-col span="8" class="vant-left">
          <img :src="item.product_list[0].image_src" alt="">
        </van-col>
        <!-- 主体右侧四张小图片 -->
        <van-col span="16" class="vant-right">
          <!-- 右侧上方两张图片 -->
          <van-row>
            <van-col span="12">
              <img :src="item.product_list[1].image_src" alt="">
            </van-col>
            <van-col span="12">
              <img :src="item.product_list[2].image_src" alt="">
            </van-col>
          </van-row>
          <!-- 右侧下方两张图片 -->
          <van-row>
            <van-col span="12">
              <img :src="item.product_list[3].image_src" alt="">
            </van-col>
            <van-col span="12">
              <img :src="item.product_list[4].image_src" alt="">
            </van-col>
          </van-row>
        </van-col>
      </van-row>
    </van-row>
  </div>
</template>

<script>
import Vue from 'vue';
import { Col, Row } from 'vant';
import 'vant/lib/col/style'
import 'vant/lib/row/style'
Vue.use(Col);
Vue.use(Row);
export default {
  name:'HomeInfo',
  created() {
    this.$http({
      url:"/api/public/v1/home/floordata",
      methods:"get"
    }).then(res => {
      this.goodsList = res.data.message
    })
  },
  data() {
    return {
      goodsList:[]
    }
  },
}
</script>

<style scoped>
  img{
    width: 95%;
  }
  .vant-right img{
    height: 100px;
  }
  .vant-left img{
    height: 204px;
  }
</style>